<template>
  <div id="login">
 
    <div class="login-box">
      
      <zc @ret="reBox">
        <button class="zc" @click="zc">注册</button>
      </zc>

      <dr @lgb="lgBox">
        <template v-slot:dtex><input type="text" placeholder="用户账号" v-model="lgnum"></template>
        <template v-slot:dpwd><input type="password" placeholder="密码" v-model="lgpwd"></template>
        <template v-slot:dr><button class="dr" @click="dr">登录</button></template>
      </dr>
      
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import zc from './zc/zc.vue'
import dr from './dr/dr.vue'

export default {
  name: "login",
  data() {
    return {
      tips: "错误：信息不合法",
      number: /^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      pwd: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,200}$/,
      lgnum: "",
      lgpwd: ""
    };
  },
  methods: {
    lgBox() {
      const lgBox = document.querySelector(".login-button");
      const reBox = document.querySelector(".login-conter");
      lgBox.classList.add("lg-box");
      reBox.classList.add("re-box");
      $(".index-register input").val("");
      $(".index-register div").css("opacity","0")
    },
    reBox() {
      const lgBox = document.querySelector(".login-button");
      const reBox = document.querySelector(".login-conter");
      lgBox.classList.remove("lg-box");
      reBox.classList.remove("re-box");
    },
    dr(){
      if(this.lgnum == "" || this.lgpwd == ""){
        $("body").append("<div id='key'></div>");
        setInterval(function(){
          $("#key").remove()
        },3000)
        // $("body").append("<div id='prompt'>"+this.tips+"</div>")
      }
      else if((this.lgnum.search(this.number)==0) && (this.lgpwd.search(this.pwd)==0)){
        let posts = "number="+this.lgnum+"&pwd="+this.lgpwd+"";
        axios.post("http://106.12.172.199/php/login.php",posts,qs.stringify())
        .then(res=>{
          console.log(res.data);
          if (res.data == 1) {
            // pr.prompt('.dr', '...正在登录', 1)
          }
        })

      }
      else{
        
      }
        
    },
    zc() {
      const number = /^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      const pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,200}$/;
      const tex = $(".tex").val()
      const pwdVal = $(".pwd").val()
      const conVal = $(".conpwd").val()
      // console.log((tex.search(number) === 0));
      // console.log((pwdVal.search(pwd) == 0));
      // console.log( (pwdVal === conVal));
      let posts = "number="+tex+"&pwd="+pwdVal+"";
      if(tex.search(number) === 0 && pwdVal.search(pwd) === 0 && pwdVal === conVal){

        axios.post("http://106.12.172.199/php/php.php",posts,qs.stringify()
        )
        //jquery请求
        // $.ajax({
        // contentType: "application/x-www-form-urlencoded",
        //   type: "post",
        //   url: "http://106.12.172.199/php/php.php",
        //   data: {"number":tex,"pwd":pwdVal},
        //   success: function (res) {
        //     console.log(res);
        //   }
        // });
      }
      else{
        
        $("body").append("<div id='prompt'>"+this.tips+"</div>")
        setTimeout(function(){
          $("#prompt").remove()
          $(".zc").removeAttr("disabled")
        },2000)
        $(".zc").attr("disabled","disabled")
      }
      

    }
  },
  created() {
    $(document).ready(function() {
      
      $(".index-register input").focus(function(){
        var index = $(this).index();
        switch (index){
          case 0:
            $(".ts").html("*请输入11位数字的手机号码");
            break;
          case 2:
            $(".ts").html("*请输入6到18的密码，且必须包含数与字母");
            break;
          case 4:
            $(".ts").html("*请再输入一次密码");
            break;
        }
      });

      $(".index-register input").blur(function(){
        $(".ts").html("")
      })
      
      $(".index-register input").keyup(function(e) {
        const number = /^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        const pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,200}$/;
        const pwdVal = $(".pwd").val()
        const conVal = $(".conpwd").val()
        let tex = $(this).val();
        let index = $(this).index()+1;
        
        // console.log(tex);
        if (index === 1) {
          if (tex.search(number) == 0) {
            $(this).next().css('opacity','1');
          }
          else{
            $(this).next().css('opacity','0');
          }
        } 
        else if (index === 3) {
          if(tex.search(pwd) == 0){
            $(this).next().css('opacity','1');
            if (pwdVal === conVal) {
              console.log(pwdVal, conVal);
              $('.conpwd').next('div').css('opacity','1');
              $('.conpwd').prev('div').css('opacity','1');
            }
            else{
              $('.conpwd').next('div').css('opacity','0');
            }
          }
          else{
            $('.conpwd').next('div').css('opacity','0');
            $('.conpwd').prev('div').css('opacity','0');
          }
        }
        else{
          if (tex.search(pwd) == 0 && pwdVal == conVal) {
            $(this).next().css('opacity','1');
          }
          else{
            $('.conpwd').next().css('opacity','0');
          }
        }
      });

      $(".index-register input").focus(function(e) {
        let index = $(this).index()+1;
        let ts = "Ts" + index;
        $("." + ts).show();
      });

      $(".index-register input").blur(function() {
        let index = $(this).index()+1 ;
        let ts = "Ts" + index;
        $("." + ts).hide();
      });
    });
    $(window).resize(function(){
      var width = $(document).outerWidth()
      var height = $(document).outerHeight();

      
      console.log(width,height);
    })
  },
  components:{
    zc,
    dr
  }
};
</script>

<style scoped>
@import url("./style.css");
</style>
